<template>
	<div>
		<div style="margin-bottom: 25px">
			<el-input id="patitentName" placeholder="请输入内容" v-model="searchName" style="width: 260px; margin-right: 20px" clearable>
				<el-button slot="append" @click="getList" icon="el-icon-search"></el-button>
			</el-input>

			<el-button @click="dialogFormVisible = true" type="success" icon="el-icon-plus" style="margin-right:20px">添加药品</el-button>
			<el-dialog title="新型药品添加" :visible.sync="dialogFormVisible" :before-close="handleClose">
				<el-form :model="drug">
					<el-form-item label="药品编号" :label-width="formLabelWidth">
						<el-input v-model="drug.d_card" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="药品名称" :label-width="formLabelWidth">
						<el-input v-model="drug.d_name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="药品品牌" :label-width="formLabelWidth">
						<el-input v-model="drug.d_brand" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="是否为处方药" :label-width="formLabelWidth">
						<el-select v-model="drug.d_prescription" placeholder="请选择">
							<el-option label="是" value="y"></el-option>
							<el-option label="否" value="n"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="药品进价" :label-width="formLabelWidth">
						<el-input v-model="drug.d_in_price" autocomplete="off" oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'></el-input>
					</el-form-item>
					<el-form-item label="药品售价" :label-width="formLabelWidth">
						<el-input v-model="drug.d_out_price" autocomplete="off" oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'></el-input>
					</el-form-item>
					<el-form-item label="药品数量" :label-width="formLabelWidth">
						<el-input v-model="drug.d_stock" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="药品状态" :label-width="formLabelWidth">
						<el-select v-model="drug.d_status" placeholder="请选择">
							<el-option label="启用" value="y"></el-option>
							<el-option label="禁用" value="n"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="exitdialogFromVisible()">取 消</el-button>
					<el-button :plain="true" type="primary" @click="addDrug()">确 定</el-button>
				</div>
			</el-dialog>

			<el-button @click="dialogFormVisible = true" type="success" icon="el-icon-plus">开药</el-button>
			<el-dialog title="新型药品添加" :visible.sync="dialogFormVisible" :before-close="handleClose">
				<el-form :model="drug">
					<el-form-item label="药品编号" :label-width="formLabelWidth">
						<el-input v-model="drug.d_card" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="药品名称" :label-width="formLabelWidth">
						<el-input v-model="drug.d_name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="药品品牌" :label-width="formLabelWidth">
						<el-input v-model="drug.d_brand" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="是否为处方药" :label-width="formLabelWidth">
						<el-select v-model="drug.d_prescription" placeholder="请选择">
							<el-option label="是" value="y"></el-option>
							<el-option label="否" value="n"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="药品进价" :label-width="formLabelWidth">
						<el-input v-model="drug.d_in_price" autocomplete="off" oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'></el-input>
					</el-form-item>
					<el-form-item label="药品售价" :label-width="formLabelWidth">
						<el-input v-model="drug.d_out_price" autocomplete="off" oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'></el-input>
					</el-form-item>
					<el-form-item label="药品数量" :label-width="formLabelWidth">
						<el-input v-model="drug.d_stock" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="药品状态" :label-width="formLabelWidth">
						<el-select v-model="drug.d_status" placeholder="请选择">
							<el-option label="启用" value="y"></el-option>
							<el-option label="禁用" value="n"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="exitdialogFromVisible()">取 消</el-button>
					<el-button :plain="true" type="primary" @click="addDrug()">确 定</el-button>
				</div>
			</el-dialog>
			

		</div>

		<div>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column fixed type="index" label="序号" width="80"> </el-table-column>
				<el-table-column prop="d_card" label="药品编号" width="130"> </el-table-column>
				<el-table-column prop="d_name" label="药品名字" width="160"> </el-table-column>
				<el-table-column prop="d_brand" label="药品品牌" width="130"> </el-table-column>
				<el-table-column prop="d_in_price" label="进价" width="120"> </el-table-column>
				<el-table-column prop="d_out_price" label="售价" width="120"> </el-table-column>
				<el-table-column prop="d_prescription" label="是否处方药" width="120"> 
					<template slot-scope="scope">
						<label v-if="scope.row.d_prescription=='y'">
							是
						</label>
						<label v-if="scope.row.d_prescription=='n'">
							否
						</label>
					</template>
				</el-table-column>
				<el-table-column prop="d_stock" label="库存" width="120"> </el-table-column>
				<el-table-column prop="d_status" label="状态" width="120">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.d_status"
							active-color="#13ce66"
							active-value="y"
							inactive-value="n"
							@change="changeSwitch(scope.row)"
							inactive-color="#ff4949"
						>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="140">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="middle">查看</el-button>

						<el-button type="text" @click="selected(scope.row)" size="middle">编辑</el-button>
						<el-dialog title="药品修改" :visible.sync="dialogUpdateVisible" :before-close="closeUpdate" append-to-body>
							<el-form :model="drugItem">
								<el-form-item label="药品编号" :label-width="formLabelWidth">
									<el-input v-model="drugItem.d_card" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="药品名称" :label-width="formLabelWidth">
									<el-input v-model="drugItem.d_name" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="药品品牌" :label-width="formLabelWidth">
									<el-input v-model="drugItem.d_brand" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="是否为处方药" :label-width="formLabelWidth">
									<el-select v-model="drugItem.d_prescription" placeholder="请选择">
										<el-option label="是" value="y"></el-option>
										<el-option label="否" value="n"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="药品进价" :label-width="formLabelWidth">
									<el-input v-model="drugItem.d_in_price" autocomplete="off" oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'></el-input>
								</el-form-item>
								<el-form-item label="药品售价" :label-width="formLabelWidth">
									<el-input v-model="drugItem.d_out_price" autocomplete="off" oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'></el-input>
								</el-form-item>
								<el-form-item label="药品数量" :label-width="formLabelWidth">
									<el-input v-model="drugItem.d_stock" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="药品状态" :label-width="formLabelWidth">
									<el-select v-model="drugItem.d_status" placeholder="请选择">
										<el-option label="启用" value="y"></el-option>
										<el-option label="禁用" value="n"></el-option>
									</el-select>
								</el-form-item>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button @click="exitUpdate()">取 消</el-button>
								<el-button :plain="true" type="primary" @click="update(scope.row)">确 定</el-button>
							</div>
						</el-dialog>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="block" style="margin-left: 300px;margin-top:50px">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="current"
				:page-sizes="[6, 8, 10, 12]"
				:page-size="6"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
import axios from 'axios';
export default {
	data() {
		return {
			tableData: [],
			pageSize: 6,
			current: 1,
			total: 0,
			searchName: '',
			dialogFormVisible: false,
			dialogUpdateVisible: false,
			drug: {},
			drugItem: {
				d_name: '',
				d_card: '',
				d_brand: '',
				d_prescription: '',
				d_in_price: 0,
				d_out_price: 0,
				d_stock: 0,
				d_status: '',
			},
			formLabelWidth: '120px',
		};
	},
	methods: {
		handleClick(row) {
			console.log(row);
		},
		getList() {
			axios
				.get('http://localhost/api/drug/drug/findAll?size=' + this.pageSize + '&current=' + this.current + '&name=' + this.searchName)
				.then((resp) => {
					const page = resp.data;
					this.tableData = page.records;
					this.current = page.current;
					this.total = page.total;
				})
				.catch((error) => {					
					this.$message(error);

				});
		},
		handleSizeChange(val) {
			this.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.current = val;
			this.getList();
		},
		changeSwitch(val) {
			axios
				.get('http://localhost/api/drug/drug/updateStatusById?id=' + val.d_id + '&status=' + val.d_status)
				.then((resp) => {
					this.getList();
				})
				.catch((error) => {
					this.$message(error);

				});
		},
		exitdialogFromVisible() {
			this.dialogFormVisible = false;
			this.drug = {};
		},
		addDrug() {
			axios
				.get(
					'http://localhost/api/drug/drug/addDrug?dCard=' +
						this.drug.d_card +
						'&dName=' +
						this.drug.d_name +
						'&dBrand=' +
						this.drug.d_brand +
						'&dPrescription=' +
						this.drug.d_prescription +
						'&dInPrice=' +
						this.drug.d_in_price +
						'&dOutPrice=' +
						this.drug.d_out_price +
						'&dStock=' +
						this.drug.d_stock +
						'&dStatus=' +
						this.drug.d_status
				)
				.then((resp) => {
					this.drug = {};
					this.getList();
					this.$message({
						message: resp.data,
						type:'success'
					});
				})
				.catch((error) => {
					this.$message(error);
				});
			console.log(this.drug);
			this.dialogFormVisible = false;
		},
		selected(row) {
			this.dialogUpdateVisible = true;
			this.drugItem.d_card = row.d_card;
			this.drugItem.d_name = row.d_name;
			this.drugItem.d_brand = row.d_brand;
			this.drugItem.d_prescription = row.d_prescription;
			this.drugItem.d_in_price = row.d_in_price;
			this.drugItem.d_out_price = row.d_out_price;
			this.drugItem.d_stock = row.d_stock;
			this.drugItem.d_status = row.d_status;
		},
		exitUpdate() {
			this.dialogUpdateVisible = false;
			this.drug = {};
		},
		handleClose(done) {
			this.$confirm('确认关闭?')
				.then((_) => {
					done();
					this.drug = {};
				})
				.catch((_) => {});
		},
		closeUpdate(done) {
			this.$confirm('确认关闭?')
				.then((_) => {
					done();
					this.drug = {};
				})
				.catch((_) => {});
		},
		update(val) {
			var d_id = val.d_id;
			axios
				.get(
					'http://localhost/api/drug/drug/updateDrug?dId=' +
						d_id +
						'&dCard=' +
						this.drugItem.d_card +
						'&dName=' +
						this.drugItem.d_name +
						'&dBrand=' +
						this.drugItem.d_brand +
						'&dPrescription=' +
						this.drugItem.d_prescription +
						'&dInPrice=' +
						this.drugItem.d_in_price +
						'&dOutPrice=' +
						this.drugItem.d_out_price +
						'&dStock=' +
						this.drugItem.d_stock +
						'&dStatus=' +
						this.drugItem.d_status
				)
				.then((resp) => {
					this.getList();
					this.dialogUpdateVisible = false;
					this.drug = {};
					this.getList();
					this.$message({
						message: resp.data,
						type: 'success'
					});
				})
				.catch((error) => {
					this.$message(error);
				});
		},
	},
	mounted() {
		this.getList();
	},
};
</script>

<style>
</style>